{extend name="$_admin_public_base_"/}
{block name="style"}
<link href="__LIBS__/webuploader/css/webuploader.css" type="text/css" rel="stylesheet">
<style type="text/css">
/*tab*/
.nav-tabs-custom>.nav-tabs>li:first-of-type.active>a{border-left-color:#e0e0e0;}
.nav-tabs{background: none;border-bottom: 2px solid #eee;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{border:none;color:#5db2ff;}
.nav-tabs>li>a, .nav-tabs>li>a:focus, .nav-tabs>li>a:hover{border:none;color: #666;}
.nav-tabs>li.active{border-bottom:none;border-right: 1px solid #f4f4f4;}
.nav-tabs>li>a{font-weight: 500;}
/*个人资料*/
.profile-username{font-size: 16px;color: #666;}
	/*上传个人图像*/
.upload-avatar-box{display: block;margin-top: 20px;width: 135px;height: 130px;line-height: 120px;}
.upload-avatar-box img{max-height: 120px;max-width: 125px;}
</style>
{/block}
{block name="main"}
<section class="content pt-5">
    <div class="row profile-wrap">
      <div class="col-md-3">

        <!-- Profile Image -->
        <div class="box box-info">
          <div class="box-body box-profile">
            <img class="profile-user-img img-responsive img-circle" src="{$user_info.avatar}" alt="用户头像">

            <h3 class="profile-username text-center">{$user_info.nickname}</h3>

            <p class="text-muted text-center">{volist name="user_info.auth_group" id="auth_group"}{$auth_group} {/volist}</p>

    <!--               <ul class="list-group list-group-unbordered">
              <li class="list-group-item">
                <b>粉丝</b> <a class="pull-right">1,322</a>
              </li>
              <li class="list-group-item">
                <b>关注</b> <a class="pull-right">543</a>
              </li>
              <li class="list-group-item">
                <b>朋友</b> <a class="pull-right">13,287</a>
              </li>
            </ul> -->

     <!--        <a href="#" class="btn btn-primary btn-block"><b>关注</b></a> -->
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

        <!-- About Me Box -->
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">关于我</h3>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <strong><i class="fa fa-book margin-r-5"></i> 邮箱</strong>

            <p class="text-muted mt-10 ml-20">
              {$user_info.email}
            </p>

            <hr>

    <!--               <strong><i class="fa fa-map-marker margin-r-5"></i> 地区</strong>

            <p class="text-muted mt-10 ml20">Malibu, California</p>

            <hr>

            <strong><i class="fa fa-pencil margin-r-5"></i> 技能</strong>
            <p class="text-muted mt-10"> 
              <span class="label label-danger">UI Design</span>
              <span class="label label-success">Coding</span>
              <span class="label label-info">Javascript</span>
              <span class="label label-warning">PHP</span>
              <span class="label label-primary">Node.js</span>
            </p>

            <hr> -->

            <strong><i class="fa fa-file-text-o margin-r-5"></i> 个人描述</strong>
            <p class="text-muted mt-10 ml20">{$user_info.description}</p>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
      <div class="col-md-9">
        <div class="nav-tabs-custom">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#settings" data-toggle="tab" aria-expanded="false">个人设置</a></li>
          </ul>
          <div class="tab-content">
            
            <!-- /.tab-pane -->
            <div class="tab-pane active" id="settings">
                <form action="{:url('user/User/profile')}" method="post" class="form-builder form-horizontal">
                  <fieldset>
                    <input type="hidden" id="uid" name="uid" value="{$user_info.uid|default='0'}">
                    <div class="form-group item_nickname ">
            	        <label for="nickname" class="col-md-3 control-label">昵称<sup>*</sup></label>
            	        <div class="col-md-4">
            		        <input type="text" class="form-control" name="nickname" value="{$user_info.nickname}">
            	        </div>

            	       </div>
            	       <div class="form-group item_username ">
            	        <label for="username" class="col-md-3 control-label">用户名<sup>*</sup></label>
            	        <div class="col-md-4">
            		        <input type="text" class="form-control" name="username" value="{$user_info.username}">
            	        </div>
            	  
            	       </div>
            	      <div class="form-group item_email ">
            	        <label for="email" class="col-md-3 control-label">邮箱<sup>*</sup></label>
            	        <div class="col-md-4">
            		        <div class="input-group">
            		        	<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
            			        <input type="email" class="form-control" name="email" value="{$user_info.email}" placeholder="填写Email">
            		        </div>
            	        </div>
            	        </div>
            	        <div class="form-group item_mobile ">
            	        <label for="mobile" class="col-md-3 control-label">手机号</label>
            	        <div class="col-md-4">
            	        	<div class="input-group">
            	        		<span class="input-group-addon"><i class="fa fa-phone"></i></span>
            		        	<input type="number" class="form-control" name="mobile" value="{$user_info.mobile}" placeholder="填写手机号">
            		        </div>

            	        </div>
            	        </div>
            			   <div class="form-group item_sex ">
            			   <label for="sex" class="col-md-3 control-label">性别</label>
            			    <div class="col-md-6">
            	          <div class="oh mb-10 pl-5">
                            <div class="radio radio-primary fl mr-10">
                              <label for="sex0">
                                <input type="radio" name="sex" id="sex0" value="0">&nbsp;保密</label>
                            </div>
                            <div class="radio radio-primary fl mr-10">
                              <label for="sex1">
                                <input type="radio" name="sex" id="sex1" value="1" checked="">&nbsp;男</label>
                            </div>
            							  <div class="radio radio-primary fl mr-10">
                              <label for="sex2"><input type="radio" name="sex" id="sex2" value="2">&nbsp;女</label>
                            </div>
                          </div>
                      </div>
                </div>   
               <div class="form-group item_description ">
                <label for="description" class="col-md-3 control-label">个人说明</label>
                <div class="col-md-6">
                	<textarea name="description" class="form-control" length="120" rows="5">{$user_info.description}</textarea>
                </div>
                </div>
              <div class="row">
            	  <input type="hidden" id="ismore_avatar" value="single">
                <div class="form-group controls item_avatar ">
                <label for="avatar" class="col-md-3 control-label">头像<sup>*</sup></label>
                <div class="col-md-6" style="padding-bottom: 5px;"><span class="btn btn-info ml-10 btn-sm" id="upload_avatar_avatar"><i class="fa fa-upload"></i> 上传头像</span><span class="color-red f12 ml-10">用户头像默认随机分配</span>      
                    <input class="attach" type="hidden" id="avatar" name="avatar" value="{$user_info.avatar}">

            	        <div class="upload-avatar-box tc popup-avatar img-thumbnail pr">
            	            <div class="each">
            	            <i data-avatarid="avatar" class="removeAvatar fa fa-times-circle remove-attachment"></i> 
            	             
            	                <a href="{$user_info.avatar|root_full_path}" title="点击查看大图">
            	                    <img src="{$user_info.avatar|root_full_path}">
            	                </a>           
            	         		</div>
            	        </div>
                    </div>
                    </div>
              	</div>

                   <hr>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-3 mt-10 tc">
                           <div class="col-md-3">
                                <button class="btn btn-block btn-primary submit ajax-post" type="submit" target-form="form-builder">确定</button>
                            </div>
                            <div class="col-md-3">
                                <button onclick="javascript:history.back(-1);return false;" class="btn btn-block btn-default return">返回</button>
                            </div>
                      </div>
                  </div>

                 </fieldset>
                </form>
            </div>
            <!-- /.tab-pane -->
          </div>
          <!-- /.tab-content -->
        </div>
        <!-- /.nav-tabs-custom -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
{/block}

{block name="script"}
<script type="text/javascript" src="__LIBS__/webuploader/js/webuploader.min.js"></script>
<script>
//本地上传(分开写为了好控制)
$(function () {
    var uploader_avatar= WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        duplicate: true,// 同一文件是否可以重复上传
        // swf文件路径
        swf: '__LIBS__/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: "{:url('admin/Upload/uploadAvatar',['uid'=>$user_info['uid']])}",
        //验证文件总数量, 超出则不允许加入队列
        fileNumLimit: 5,
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false, 
        // 验证单个文件大小是否超出限制, 超出则不允许加入队列 
        fileSingleSizeLimit:2*1024*1024,  
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.

        //选择文件的按钮
        pick: '#upload_avatar_avatar',
        // 只允许选择图片文件
        accept:{title:'Images',extensions:'gif,jpg,jpeg,bmp,png',mimeTypes:'image/*'}
    });
    uploader_avatar.on('fileQueued', function (file) {
        uploader_avatar.upload();
    });
    /*上传成功**/
    uploader_avatar.on('uploadSuccess', function (file, result) {console.debug(result);
        if (result.code) {
            var data = result.data;
            $("[name='avatar']").val(data.path);
            $("[name='avatar']").parent().find('.popup-avatar').html(
                      '<div class="each"><i data-avatarid="avatar" class="removeAvatar fa fa-times-circle remove-attachment"></i><a href="'+data.url+'" title="点击查看大图片"><img src="'+data.url+'"></a><div class="text-center opacity del_btn" ></div></div>'
                );

            uploader_avatar.reset();
        } else {
            updateAlert(result.msg);
            setTimeout(function () {
                $(this).removeClass('disabled').prop('disabled', false);
            }, 1500);
        }
    });
      //移除头像
      $('body').on('click','.removeAvatar', function() {
           var avatarid=$(this).attr('data-avatarid');
          $("#"+avatarid).val('');
          $('.popup-avatar').html('');
      })
    })

</script>
{/block}
